<template>
  <div class="settings-container">
    <div class="page-header">
      <h2>系统设置</h2>
      <p class="page-description">管理系统配置和参数设置</p>
    </div>

    <el-row :gutter="24">
      <!-- 基本设置 -->
      <el-col :span="12">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <el-icon><Setting /></el-icon>
              <span>基本设置</span>
            </div>
          </template>
          
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="basicSettings.systemName" placeholder="请输入系统名称" />
            </el-form-item>
            
            <el-form-item label="学校名称">
              <el-input v-model="basicSettings.schoolName" placeholder="请输入学校名称" />
            </el-form-item>
            
            <el-form-item label="系统公告">
              <el-input 
                v-model="basicSettings.announcement"
                type="textarea"
                :rows="3"
                placeholder="请输入系统公告"
              />
            </el-form-item>
            
            <el-form-item label="维护模式">
              <el-switch 
                v-model="basicSettings.maintenanceMode"
                active-text="开启"
                inactive-text="关闭"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 查重设置 -->
      <el-col :span="12">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <el-icon><DocumentCopy /></el-icon>
              <span>查重设置</span>
            </div>
          </template>
          
          <el-form :model="checkSettings" label-width="120px">
            <el-form-item label="相似度阈值">
              <el-slider 
                v-model="checkSettings.similarityThreshold"
                :min="0"
                :max="100"
                show-input
                :format-tooltip="formatPercent"
              />
            </el-form-item>
            
            <el-form-item label="最大文件大小">
              <el-input-number 
                v-model="checkSettings.maxFileSize"
                :min="1"
                :max="100"
                controls-position="right"
              />
              <span class="unit">MB</span>
            </el-form-item>
            
            <el-form-item label="支持格式">
              <el-checkbox-group v-model="checkSettings.supportedFormats">
                <el-checkbox label="pdf">PDF</el-checkbox>
                <el-checkbox label="doc">DOC</el-checkbox>
                <el-checkbox label="docx">DOCX</el-checkbox>
                <el-checkbox label="txt">TXT</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            
            <el-form-item label="检测语言">
              <el-select v-model="checkSettings.language" placeholder="请选择">
                <el-option label="中文" value="zh" />
                <el-option label="英文" value="en" />
                <el-option label="中英混合" value="zh-en" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="24" style="margin-top: 24px;">
      <!-- 邮件设置 -->
      <el-col :span="12">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <el-icon><ChatDotRound /></el-icon>
              <span>邮件设置</span>
            </div>
          </template>
          
          <el-form :model="emailSettings" label-width="120px">
            <el-form-item label="SMTP服务器">
              <el-input v-model="emailSettings.smtpServer" placeholder="smtp.example.com" />
            </el-form-item>
            
            <el-form-item label="端口">
              <el-input-number 
                v-model="emailSettings.port"
                :min="1"
                :max="65535"
                controls-position="right"
              />
            </el-form-item>
            
            <el-form-item label="发件人邮箱">
              <el-input v-model="emailSettings.fromEmail" placeholder="noreply@example.com" />
            </el-form-item>
            
            <el-form-item label="邮箱密码">
              <el-input 
                v-model="emailSettings.password"
                type="password"
                placeholder="请输入密码"
                show-password
              />
            </el-form-item>
            
            <el-form-item label="启用SSL">
              <el-switch v-model="emailSettings.ssl" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>

      <!-- 安全设置 -->
      <el-col :span="12">
        <el-card class="settings-card">
          <template #header>
            <div class="card-header">
              <el-icon><Lock /></el-icon>
              <span>安全设置</span>
            </div>
          </template>
          
          <el-form :model="securitySettings" label-width="120px">
            <el-form-item label="密码强度">
              <el-select v-model="securitySettings.passwordStrength">
                <el-option label="低（6位以上）" value="low" />
                <el-option label="中（8位+数字字母）" value="medium" />
                <el-option label="高（8位+数字字母符号）" value="high" />
              </el-select>
            </el-form-item>
            
            <el-form-item label="登录失败限制">
              <el-input-number 
                v-model="securitySettings.maxLoginAttempts"
                :min="3"
                :max="10"
                controls-position="right"
              />
              <span class="unit">次</span>
            </el-form-item>
            
            <el-form-item label="会话超时">
              <el-input-number 
                v-model="securitySettings.sessionTimeout"
                :min="30"
                :max="1440"
                controls-position="right"
              />
              <span class="unit">分钟</span>
            </el-form-item>
            
            <el-form-item label="强制HTTPS">
              <el-switch v-model="securitySettings.forceHttps" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button @click="handleReset">重置</el-button>
      <el-button type="primary" @click="handleSave" :loading="saving">
        保存设置
      </el-button>
      <el-button type="success" @click="handleTest">
        测试连接
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Setting, 
  DocumentCopy, 
  ChatDotRound, 
  Lock 
} from '@element-plus/icons-vue'

// 基本设置
const basicSettings = ref({
  systemName: '论文查重系统',
  schoolName: '辽宁理工大学',
  announcement: '欢迎使用论文查重系统，请严格按照要求提交论文。',
  maintenanceMode: false
})

// 查重设置
const checkSettings = ref({
  similarityThreshold: 30,
  maxFileSize: 30,
  supportedFormats: ['pdf', 'doc', 'docx', 'txt'],
  language: 'zh-en'
})

// 邮件设置
const emailSettings = ref({
  smtpServer: '',
  port: 587,
  fromEmail: '',
  password: '',
  ssl: true
})

// 安全设置
const securitySettings = ref({
  passwordStrength: 'medium',
  maxLoginAttempts: 5,
  sessionTimeout: 120,
  forceHttps: false
})

const saving = ref(false)

// 格式化百分比
const formatPercent = (value) => `${value}%`

// 保存设置
const handleSave = async () => {
  try {
    saving.value = true
    
    // 模拟保存API请求
    console.log('保存系统设置:', {
      basicSettings: basicSettings.value,
      checkSettings: checkSettings.value,
      emailSettings: emailSettings.value,
      securitySettings: securitySettings.value
    })
    
    // 模拟网络延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    ElMessage.success('设置保存成功')
  } catch (error) {
    console.error('保存设置失败:', error)
    ElMessage.error('保存失败：' + error.message)
  } finally {
    saving.value = false
  }
}

// 重置设置
const handleReset = async () => {
  try {
    await ElMessageBox.confirm(
      '确定要重置所有设置为默认值吗？',
      '重置确认',
      { type: 'warning' }
    )
    
    // 重置为默认值
    basicSettings.value = {
      systemName: '论文查重系统',
      schoolName: '辽宁理工大学',
      announcement: '欢迎使用论文查重系统，请严格按照要求提交论文。',
      maintenanceMode: false
    }
    
    checkSettings.value = {
      similarityThreshold: 30,
      maxFileSize: 30,
      supportedFormats: ['pdf', 'doc', 'docx', 'txt'],
      language: 'zh-en'
    }
    
    emailSettings.value = {
      smtpServer: '',
      port: 587,
      fromEmail: '',
      password: '',
      ssl: true
    }
    
    securitySettings.value = {
      passwordStrength: 'medium',
      maxLoginAttempts: 5,
      sessionTimeout: 120,
      forceHttps: false
    }
    
    ElMessage.success('设置已重置为默认值')
  } catch {
    // 用户取消
  }
}

// 测试连接
const handleTest = async () => {
  try {
    console.log('测试邮件服务器连接:', emailSettings.value)
    
    // 模拟测试连接
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    ElMessage.success('邮件服务器连接测试成功')
  } catch (error) {
    console.error('连接测试失败:', error)
    ElMessage.error('连接测试失败，请检查配置')
  }
}

// 页面加载时获取设置
onMounted(() => {
  console.log('系统设置页面已加载')
})
</script>

<style scoped>
.settings-container {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-description {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.settings-card {
  margin-bottom: 24px;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.unit {
  margin-left: 8px;
  color: #909399;
  font-size: 12px;
}

.action-buttons {
  padding: 24px 0;
  text-align: center;
  border-top: 1px solid #ebeef5;
  margin-top: 24px;
}

.action-buttons .el-button {
  margin: 0 8px;
}

:deep(.el-form-item) {
  margin-bottom: 20px;
}

:deep(.el-card__header) {
  background: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
}
</style>